<template>
  <div class="PhotosList">
    <van-tabs @click="getImagesById">
      <van-tab v-for="item in imgCate"
               :title="item.title"
               :key="item.id">
      </van-tab>
      <div class="images"
           v-if="images.length>0">
        <img v-for="img in images"
             :key="img.id"
             :src="img.img_url"
             @click="getDetail('/home/photoinfo',img.id)">
      </div>
      <div v-else>暂无图片</div>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    imgCate: [],
    images: []
  }),
  created () {
    this.getImgCategory()
    this.getImagesById(0)
  },
  methods: {
    async getImgCategory () {
      try {
        const {
          data: { message }
        } = await this.Api.getImgCategory()
        message.unshift({
          id: 0,
          title: '全部'
        })
        this.imgCate = message
      } catch (error) {
        this.$Toast(error)
      }
    },
    async getImagesById (id) {
      try {
        const {
          data: { message }
        } = await this.Api.getImagesById(id)
        this.images = message
      } catch (error) {
        this.$Toast(error)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.images {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
